<template>
	<div class="w-100% h-100vh" style="background-color: #e0eff4">
		<div class="container">
			<el-row :gutter="20">
				<el-col :span="18">
					<el-card>
						<template #header>
							<div class="card-header">
								<h1>{{ state.info.title }}</h1>
							</div>
						</template>
						<div v-html="state.info.info"></div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<JobRowse title="看过的职位" :itemList="state.viewList" />
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

const { params } = useRoute()
const router = useRouter

const state = reactive({
	id: params.id,
	info: {},
	viewList: [],
})

function init() {
	http.get(`/artcle/${state.id}`).then((res) => {
		state.info = res.data
	})

	//浏览过的信息
	http.get(`/item/view?type=1`).then((res) => {
		state.viewList = res.data
	})
}

init()
</script>

<style scoped>
.container {
	width: 1200px;
	margin: 0 auto;
	margin-top: 20px;
}

h1 {
	font-size: 28px;
	font-weight: 600;
	color: #222;
	line-height: 40px;
}
</style>
